آموزش توسعه وب فرانت‌اند با HTML، CSS و جاوا اسکریپت مدرن [ویدئو]

سرفصل ها و درس ها

مقدمه ای بر طراحی و توسعه وب مدرن با HTML، CSS و جاوا اسکریپت Introduction to Modern Web Design and Development with HTML, CSS, and JavaScript

• ویدیو تبلیغاتی Promotional Video

• ویدیو تبلیغاتی Promotional Video

• مقدمه ای بر شروع دوره و کد HTML Introduction to Getting Started with the Course and HTML Code

• مقدمه ای بر شروع دوره و کد HTML Introduction to Getting Started with the Course and HTML Code

• شروع با طراحی وب: محیط وب خود را ایجاد کنید و کدنویسی را شروع کنید Getting Started with Web Design: Create Your Web Environment and Start Coding

• شروع با طراحی وب: محیط وب خود را ایجاد کنید و کدنویسی را شروع کنید Getting Started with Web Design: Create Your Web Environment and Start Coding

• چگونه اولین صفحه HTML خود را برای مبتدیان کدنویسی HTML ایجاد کنید How to Create Your First HTML Page HTML Coding Beginners

• چگونه اولین صفحه HTML خود را برای مبتدیان کدنویسی HTML ایجاد کنید How to Create Your First HTML Page HTML Coding Beginners

• عنصر HTML چیست. چگونه HTML با نمونه های HTML کار می کند What is an HTML Element; How HTML Works with HTML Samples

• عنصر HTML چیست. چگونه HTML با نمونه های HTML کار می کند What is an HTML Element; How HTML Works with HTML Samples

• با سرفصل های HTML تگ های رایج HTML شروع کنید Start with HTML Headings Common Tags HTML

• با سرفصل های HTML تگ های رایج HTML شروع کنید Start with HTML Headings Common Tags HTML

• تگ های خود بسته HTML و نحوه کار آنها را ایجاد کنید Create HTML Self-Closing Tags and How They Work

• تگ های خود بسته HTML و نحوه کار آنها را ایجاد کنید Create HTML Self-Closing Tags and How They Work

• تنظیم ویژگی های عنصر در کد HTML Setting Element Attributes in HTML Code

• تنظیم ویژگی های عنصر در کد HTML Setting Element Attributes in HTML Code

• نحوه ایجاد لینک هاپرلینک های HTML لینک های HTML تگ لنگر How to Create Links HTML Hyperlinks HTML Links Anchor Tag

• نحوه ایجاد لینک هاپرلینک های HTML لینک های HTML تگ لنگر How to Create Links HTML Hyperlinks HTML Links Anchor Tag

• افزودن تصاویر به صفحات HTML Adding Images to HTML Pages

• افزودن تصاویر به صفحات HTML Adding Images to HTML Pages

• فهرست‌های HTML افزودن فهرست‌های محتوا با فهرست‌های HTML HTML Lists Adding Content Lists with HTML Lists

• فهرست‌های HTML افزودن فهرست‌های محتوا با فهرست‌های HTML HTML Lists Adding Content Lists with HTML Lists

• جداول HTML چیست و چگونه از جداول برای ارائه محتوای خواندنی استفاده کنیم What Are HTML Tables and How to Use Tables to Present Readable Content

• جداول HTML چیست و چگونه از جداول برای ارائه محتوای خواندنی استفاده کنیم What Are HTML Tables and How to Use Tables to Present Readable Content

• HTML5 عناصر معنایی جدید معنی در نام تگ عنصر HTML5 New Semantic Elements Meaning in the Element Tag Name

• HTML5 عناصر معنایی جدید معنی در نام تگ عنصر HTML5 New Semantic Elements Meaning in the Element Tag Name

• چگونه یک صفحه وب ساده HTML ایجاد کنیم How to Create a Simple HTML Webpage

• چگونه یک صفحه وب ساده HTML ایجاد کنیم How to Create a Simple HTML Webpage

• HTML Online ایجاد یک صفحه GitHub اولین صفحه وب خود را در GitPages ایجاد کنید HTML Online Create a GitHub Page Create Your First Webpage on GitPages

• HTML Online ایجاد یک صفحه GitHub اولین صفحه وب خود را در GitPages ایجاد کنید HTML Online Create a GitHub Page Create Your First Webpage on GitPages

به صفحات وب خود با برگه های سبک آبشاری سبک دهید Style Your Webpages with Cascading Style Sheets

به صفحات وب خود با برگه های سبک آبشاری سبک دهید Style Your Webpages with Cascading Style Sheets

• مقدمه ای بر شروع کار با CSS Introduction to Getting Started with CSS

• مقدمه ای بر شروع کار با CSS Introduction to Getting Started with CSS

• اضافه کردن یک استایل به HTML خود با کد CSS برای مبتدیان Adding Styling to Your HTML with CSS Code for Beginners

• اضافه کردن یک استایل به HTML خود با کد CSS برای مبتدیان Adding Styling to Your HTML with CSS Code for Beginners

• نمای کلی استایلینگ با CSS یک ظاهر طراحی کنید Styling Overview Get Styling with CSS

• نمای کلی استایلینگ با CSS یک ظاهر طراحی کنید Styling Overview Get Styling with CSS

• رنگ پس زمینه و رنگ قلم با CSS به روز رسانی رنگ عنصر HTML Colors Background and Font Color with CSS Update HTML Element Colors

• رنگ پس زمینه و رنگ قلم با CSS به روز رسانی رنگ عنصر HTML Colors Background and Font Color with CSS Update HTML Element Colors

• CSS Box Model چیست - Box Model Border Padding Margin What Is the CSS Box Model - Box Model Border Padding Margin

• CSS Box Model چیست - Box Model Border Padding Margin What Is the CSS Box Model - Box Model Border Padding Margin

• گزینه های متن با ویژگی های تنظیم کد CSS و مقدار برای تبدیل متن Text Options with CSS Code Setting Properties and Value to Transform Text

• گزینه های متن با ویژگی های تنظیم کد CSS و مقدار برای تبدیل متن Text Options with CSS Code Setting Properties and Value to Transform Text

• اضافه کردن فونت و سبک فونت به عناصر صفحه وب خود با CSS Adding Fonts and Font Styles to Your Webpage Elements with CSS

• اضافه کردن فونت و سبک فونت به عناصر صفحه وب خود با CSS Adding Fonts and Font Styles to Your Webpage Elements with CSS

• پیوند ایالت ها با کلاس های شبه که حالت های مختلف را با CSS تنظیم می کند Link States Pseudo-Classes Setting Different States with CSS

• پیوند ایالت ها با کلاس های شبه که حالت های مختلف را با CSS تنظیم می کند Link States Pseudo-Classes Setting Different States with CSS

• نحوه تنظیم ویژگی‌های نمایش برای عناصر صفحه، مثال‌های کد استایلینگ CSS به صورت درون خطی How to Set Display Properties for Page Elements CSS Styling Code Examples Inline

• نحوه تنظیم ویژگی‌های نمایش برای عناصر صفحه، مثال‌های کد استایلینگ CSS به صورت درون خطی How to Set Display Properties for Page Elements CSS Styling Code Examples Inline

• موقعیت CSS استاتیک نسبی ثابت مثال های چسبنده مطلق CSS Position Static Relative Fixed Absolute Sticky Examples

• موقعیت CSS استاتیک نسبی ثابت مثال های چسبنده مطلق CSS Position Static Relative Fixed Absolute Sticky Examples

• CSS Float Setting Floats در CSS Setting Left Right و None Clearing Floats CSS Float Setting Floats in CSS Setting Left Right and None Clearing Floats

• CSS Float Setting Floats در CSS Setting Left Right و None Clearing Floats CSS Float Setting Floats in CSS Setting Left Right and None Clearing Floats

• ویژگی های مفیدتر CSS مانند z-index، outline، overflow، max-width و بیشتر More Useful CSS Properties such as z-index, outline, overflow, max-width, and More

• ویژگی های مفیدتر CSS مانند z-index، outline، overflow، max-width و بیشتر More Useful CSS Properties such as z-index, outline, overflow, max-width, and More

• ترکیب‌کننده‌های CSS برای انتخاب عناصر از گزینه‌ها و نمونه‌های صفحه HTML شما CSS Combinators to Select Elements from Your HTML Page Options and Examples

• ترکیب‌کننده‌های CSS برای انتخاب عناصر از گزینه‌ها و نمونه‌های صفحه HTML شما CSS Combinators to Select Elements from Your HTML Page Options and Examples

• نمونه هایی از عناصر شبه CSS رایج اولین حرف اول خط اول بعد از افزودن محتوا Examples of Common CSS Pseudo Elements firstLetter firstLine After Adding Content

• نمونه هایی از عناصر شبه CSS رایج اولین حرف اول خط اول بعد از افزودن محتوا Examples of Common CSS Pseudo Elements firstLetter firstLine After Adding Content

• نحوه ایجاد یک وب سایت ساده با سبک CSS وب سایت CSS Float واکنش گرا How to Create a Simple CSS Styled Website Responsive Website CSS Float

• نحوه ایجاد یک وب سایت ساده با سبک CSS وب سایت CSS Float واکنش گرا How to Create a Simple CSS Styled Website Responsive Website CSS Float

• ایجاد یک وب سایت واکنش گرا با CSS Flexbox Setup مثال طراحی سایت سه ستونی Creating a Responsive Website with CSS Flexbox Setup Three Column Design Site Example

• ایجاد یک وب سایت واکنش گرا با CSS Flexbox Setup مثال طراحی سایت سه ستونی Creating a Responsive Website with CSS Flexbox Setup Three Column Design Site Example

• نحوه ایجاد یک وب سایت کاملا واکنش گرا با CSS Grid طراحی وب مدرن CSS How to Create a Fully Responsive Website with CSS Grid Modern Web Design CSS

• نحوه ایجاد یک وب سایت کاملا واکنش گرا با CSS Grid طراحی وب مدرن CSS How to Create a Fully Responsive Website with CSS Grid Modern Web Design CSS

شروع کار با جاوا اسکریپت Getting Started with JavaScript

شروع کار با جاوا اسکریپت Getting Started with JavaScript

• مقدمه ای بر کدنویسی جاوا اسکریپت تعاملی کردن صفحات Introduction to Coding JavaScript Making Pages Interactive

• مقدمه ای بر کدنویسی جاوا اسکریپت تعاملی کردن صفحات Introduction to Coding JavaScript Making Pages Interactive

• شروع کار با جاوا اسکریپت آشنایی با کد جاوا اسکریپت با مثال Getting Started with JavaScript Introduction to JavaScript Code with Examples

• شروع کار با جاوا اسکریپت آشنایی با کد جاوا اسکریپت با مثال Getting Started with JavaScript Introduction to JavaScript Code with Examples

• نحوه راه‌اندازی طراحی وب محلی سرور زنده خود برای صفحات محلی HTTP How to Set Up Your Live Server Local Web Design Setup for HTTP Local Pages

• نحوه راه‌اندازی طراحی وب محلی سرور زنده خود برای صفحات محلی HTTP How to Set Up Your Live Server Local Web Design Setup for HTTP Local Pages

• متغیرهای جاوا اسکریپت Let و Const و نحوه تخصیص مقادیر برای اعلام متغیرها JavaScript Variables Let and Const and How to Assign Values to Declare Variables

• متغیرهای جاوا اسکریپت Let و Const و نحوه تخصیص مقادیر برای اعلام متغیرها JavaScript Variables Let and Const and How to Assign Values to Declare Variables

• انواع داده جاوا اسکریپت چیست و چگونه انواع داده ها را تنظیم کنیم انواع داده های پایه رشته ها What Are JavaScript Data Types and How to Set Datatypes Basic Data Types of Strings

• انواع داده جاوا اسکریپت چیست و چگونه انواع داده ها را تنظیم کنیم انواع داده های پایه رشته ها What Are JavaScript Data Types and How to Set Datatypes Basic Data Types of Strings

• اشیاء و آرایه های جاوا اسکریپت برای ذخیره چندین مقدار در یک متغیر JavaScript Objects and Arrays to Store Multiple Values in the Same Variable

• اشیاء و آرایه های جاوا اسکریپت برای ذخیره چندین مقدار در یک متغیر JavaScript Objects and Arrays to Store Multiple Values in the Same Variable

• نمونه هایی از اپراتورها در کد جاوا اسکریپت و نحوه کار اپراتورها Examples of Operators in JavaScript Code and How Operators Work

• نمونه هایی از اپراتورها در کد جاوا اسکریپت و نحوه کار اپراتورها Examples of Operators in JavaScript Code and How Operators Work

• توابع جاوا اسکریپت چیست و چگونه آرگومان ها را به یک تابع منتقل کنیم و برگردانیم What JavaScript Functions Are and How to Pass Arguments into a Function and Return

• توابع جاوا اسکریپت چیست و چگونه آرگومان ها را به یک تابع منتقل کنیم و برگردانیم What JavaScript Functions Are and How to Pass Arguments into a Function and Return

• شرایط جاوا اسکریپت اعمال منطق در کد در جاوا اسکریپت مثال JavaScript Conditions Applying Logic in Code in JavaScript Example

• شرایط جاوا اسکریپت اعمال منطق در کد در جاوا اسکریپت مثال JavaScript Conditions Applying Logic in Code in JavaScript Example

• اضافه کردن حلقه ها به کد جاوا اسکریپت با نمونه هایی از روش های حلقه Adding Loops to Your JavaScript Code with Examples of Loop Methods

• اضافه کردن حلقه ها به کد جاوا اسکریپت با نمونه هایی از روش های حلقه Adding Loops to Your JavaScript Code with Examples of Loop Methods

جاوا اسکریپت و مدل شی سند DOM (DOM) JavaScript and the DOM Document Object Model (DOM)

جاوا اسکریپت و مدل شی سند DOM (DOM) JavaScript and the DOM Document Object Model (DOM)

• مقدمه ای بر جاوا اسکریپت DOM با مثال های کدنویسی Introduction to JavaScript DOM with Coding Examples

• مقدمه ای بر جاوا اسکریپت DOM با مثال های کدنویسی Introduction to JavaScript DOM with Coding Examples

• آشنایی با DOM و درخت DOM با جاوا اسکریپت Introduction to the DOM and the DOM Tree with JavaScript

• آشنایی با DOM و درخت DOM با جاوا اسکریپت Introduction to the DOM and the DOM Tree with JavaScript

• انتخاب عنصر از صفحات وب با نمونه کد جاوا اسکریپت Element Selection from Webpages with JavaScript Code Examples

• انتخاب عنصر از صفحات وب با نمونه کد جاوا اسکریپت Element Selection from Webpages with JavaScript Code Examples

• DOM دستکاری عناصر جاوا اسکریپت عناصر صفحه خود را با کد انتخاب و به روز کنید JavaScript Element Manipulation DOM Select and Update Your Page Elements with Code

• DOM دستکاری عناصر جاوا اسکریپت عناصر صفحه خود را با کد انتخاب و به روز کنید JavaScript Element Manipulation DOM Select and Update Your Page Elements with Code

• نحوه تنظیم ویژگی های استایل با کد جاوا اسکریپت - به روز رسانی عناصر صفحه وب How to Set Styling Attributes with JavaScript Code - Update Webpage Elements

• نحوه تنظیم ویژگی های استایل با کد جاوا اسکریپت - به روز رسانی عناصر صفحه وب How to Set Styling Attributes with JavaScript Code - Update Webpage Elements

• DOM و عناصر فرم دریافت مقادیر از فیلدهای ورودی با کد جاوا اسکریپت DOM and Form Elements Getting Values from Input Fields with JavaScript Code

• DOM و عناصر فرم دریافت مقادیر از فیلدهای ورودی با کد جاوا اسکریپت DOM and Form Elements Getting Values from Input Fields with JavaScript Code

• شنوندگان رویداد DOM Element صفحات وب تعاملی را با جاوا اسکریپت ایجاد می کنند DOM Element Event Listeners Create Interactive Webpages with JavaScript

• شنوندگان رویداد DOM Element صفحات وب تعاملی را با جاوا اسکریپت ایجاد می کنند DOM Element Event Listeners Create Interactive Webpages with JavaScript

• چگونه شنوندگان رویداد را با کد جاوا اسکریپت به عناصر صفحه وب خود اضافه کنید How to Add Event Listeners to Your Webpage Elements with JavaScript Code

• چگونه شنوندگان رویداد را با کد جاوا اسکریپت به عناصر صفحه وب خود اضافه کنید How to Add Event Listeners to Your Webpage Elements with JavaScript Code

• تنظیم شنونده رویداد صفحه برای محتوای DOM بارگیری شده و رویدادهای keyup و keydown Setting Page Event Listener for DOM Content Loaded and keyup and keydown Events

• تنظیم شنونده رویداد صفحه برای محتوای DOM بارگیری شده و رویدادهای keyup و keydown Setting Page Event Listener for DOM Content Loaded and keyup and keydown Events

• نحوه ایجاد عناصر صفحه با کد جاوا اسکریپت How to Create Page Elements with JavaScript Code

• نحوه ایجاد عناصر صفحه با کد جاوا اسکریپت How to Create Page Elements with JavaScript Code

• موقعیت عنصر را به روز کنید و عناصر صفحه را با کد جاوا اسکریپت جابجا کنید Update Element Position and Move Page Elements with JavaScript Code

• موقعیت عنصر را به روز کنید و عناصر صفحه را با کد جاوا اسکریپت جابجا کنید Update Element Position and Move Page Elements with JavaScript Code

• نحوه اضافه کردن انیمیشن به عناصر صفحه وب خود با استفاده از JavaScript requestAnimation How to Add Animation to Your Webpage Elements Using JavaScript requestAnimation

• نحوه اضافه کردن انیمیشن به عناصر صفحه وب خود با استفاده از JavaScript requestAnimation How to Add Animation to Your Webpage Elements Using JavaScript requestAnimation

نحوه ایجاد یک وب سایت مدرن از ابتدا – طراحی وب سایت واکنش گرا How to Create a Modern Website from Scratch – Responsive Web Design

نحوه ایجاد یک وب سایت مدرن از ابتدا – طراحی وب سایت واکنش گرا How to Create a Modern Website from Scratch – Responsive Web Design

• ویدیوی تبلیغاتی – ایجاد یک وب سایت از ابتدا Promotional Video – Creating a Website from Scratch

• ویدیوی تبلیغاتی – ایجاد یک وب سایت از ابتدا Promotional Video – Creating a Website from Scratch

• وب سایت از ابتدا با شناور Website from Scratch with Floats

• وب سایت از ابتدا با شناور Website from Scratch with Floats

• راه اندازی ویرایشگر و کد Editor Setup and Code

• راه اندازی ویرایشگر و کد Editor Setup and Code

• تگ های ساختار HTML HTML Structure Tags

• تگ های ساختار HTML HTML Structure Tags

• یک صفحه HTML ایجاد کنید Create an HTML Page

• یک صفحه HTML ایجاد کنید Create an HTML Page

• از CSS برای طراحی یک NavBar پاسخگو برای وب سایت استفاده کنید Use CSS to Design a Responsive NavBar for the Website

• از CSS برای طراحی یک NavBar پاسخگو برای وب سایت استفاده کنید Use CSS to Design a Responsive NavBar for the Website

• افزودن فونت های گوگل از بین فونت های وب CSS طراحی وب انتخاب کنید Add Google Fonts Select from Web Fonts CSS Web Design

• افزودن فونت های گوگل از بین فونت های وب CSS طراحی وب انتخاب کنید Add Google Fonts Select from Web Fonts CSS Web Design

• نحوه ایجاد استایل محتوای صفحه اصلی وب سایت برای ایجاد ستون How to Style Main Webpage Content Create Columns

• نحوه ایجاد استایل محتوای صفحه اصلی وب سایت برای ایجاد ستون How to Style Main Webpage Content Create Columns

• آموزش طراحی وب سایت CSS چگونه به پاورقی صفحه وب سایت اضافه کنیم How to Add Columns to Webpage Footer CSS Web Design Lesson

• آموزش طراحی وب سایت CSS چگونه به پاورقی صفحه وب سایت اضافه کنیم How to Add Columns to Webpage Footer CSS Web Design Lesson

• جاوا اسکریپت را برای توابع نوار ناوبری اضافه کنید Add JavaScript for Navbar Functions

• جاوا اسکریپت را برای توابع نوار ناوبری اضافه کنید Add JavaScript for Navbar Functions